/*
 *@description: 家政服务中心系统配置页面
 *@Author:@reynold
 *@Date:2025-03-22 11:02:08
 *@Update:2025-03-22 11:02:08
 *@Version: V1.0.0
*/
<template>
  <div class="service-config-page">
    <h1>家政服务系统配置</h1>

    <!-- 服务人员管理 -->
    <div class="section">
      <h2>管理员添加</h2>
      <el-input v-model="newStaffName" placeholder="输入新管理员姓名"></el-input>
      <el-button @click="addStaff">添加管理员</el-button>
      <el-table :data="staffList" stripe>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="skills" label="联系方式"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="deleteStaff(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 服务项目管理 -->
    <div class="section">
      <h2>服务项目管理</h2>
      <el-input v-model="newServiceName" placeholder="输入新服务项目名称"></el-input>
      <el-button @click="addService">添加服务项目</el-button>
      <el-table :data="serviceList" stripe>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="deleteService(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 保存所有设置 -->
    <el-button type="primary" @click="saveAllSettings">保存所有设置</el-button>
  </div>
</template>

<script>
import { Message } from 'element-ui';

export default {
  data() {
    return {
      // 管理员列表
      staffList: [
        { name: '安琪', skills: '13223456435' },
        { name: '高佳', skills: '13098673546' },
        { name: '吴彤', skills: '13223456435' },
        { name: '李欣然', skills: '13098673546' }
      ],
      newStaffName: '',

      // 服务项目列表
      serviceList: [
        { name: '家庭清洁', description: '全面清洁家庭各个区域' },
        { name: '老人护理', description: '照顾老人日常生活' }
      ],
      newServiceName: '',

      // 价格策略
      pricePolicy: {
        basePrice: 50,
        hourlyRate: 20,
        complexityRate: 30
      }
    };
  },
  methods: {
    // 添加服务人员
    addStaff() {
      if (this.newStaffName) {
        this.staffList.push({ name: this.newStaffName, skills: '' });
        this.newStaffName = '';
        Message.success('服务人员添加成功');
      } else {
        Message.error('请输入服务人员姓名');
      }
    },
    // 删除服务人员
    deleteStaff(index) {
      this.staffList.splice(index, 1);
      Message.success('服务人员删除成功');
    },
    // 添加服务项目
    addService() {
      if (this.newServiceName) {
        this.serviceList.push({ name: this.newServiceName, description: '' });
        this.newServiceName = '';
        Message.success('服务项目添加成功');
      } else {
        Message.error('请输入服务项目名称');
      }
    },
    // 删除服务项目
    deleteService(index) {
      this.serviceList.splice(index, 1);
      Message.success('服务项目删除成功');
    },
    // 保存价格策略
    savePricePolicy() {
      Message.success('价格策略保存成功');
    },
    // 保存所有设置
    saveAllSettings() {
      // 这里可以添加保存所有设置到后端的逻辑
      Message.success('所有设置保存成功');
    }
  }
};
</script>

<style lang="less" scoped>
.service-config-page {
  padding: 20px;
  font-family: Arial, sans-serif;

  h1 {
    text-align: center;
    margin-bottom: 20px;
  }

  .section {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;

    h2 {
      margin-top: 0;
      margin-bottom: 10px;
    }
  }
}
</style>    